<template>
  <a-layout id="components-layout-demo-custom-trigger"  class='h-100'>
      <!-- 左侧菜单 s -->
      <!-- 左侧栏菜单menudata:[{name:'工作台',icon:'home',to:'/1',children:[]}], -->
      <a-layout-sider  
        :trigger="null"
        collapsible
        v-model="collapsed">
          <div class="logo">
              <a-icon type="safety"  class='header-logo' /><span  v-show='!collapsed'>供应链管理系统</span>    
          </div>
          <a-menu  theme="dark" mode="inline"  :selectedKeys='selectedKeys' :openKeys="openKeys"  @openChange="onOpenChange"  >
              <template v-for='(item,index) in  menudata'>
                  <!-- 光杆司令 -->
                  <a-menu-item  :key="index"  v-if='item.children && item.children.length==0'>
                      <router-link  :to='item.to'><a-icon  :type="item.icon" class='ft16'/><span>{{item.name}}</span></router-link>
                  </a-menu-item>
                  <!-- 小队大将 -->
                  <a-sub-menu   :key="index"  v-if='item.children && item.children.length>0'>
                      <span slot="title"><a-icon  :type="item.icon"  class='ft16'/><span>{{item.name}}</span></span>
                      <template v-for='(nav,ind) in  item.children'>
                        <!-- sub-menu下的key 规律 0sub0 -->
                        <a-menu-item  :key='subindex(index,ind)'>
                            <router-link  :to='nav.to'><a-icon  :type="nav.icon" class='ft16'/><span>{{nav.name}}</span></router-link>
                        </a-menu-item>
                      </template>
                  </a-sub-menu>
              </template>
          </a-menu>
      </a-layout-sider>
      <!-- 左侧菜单 e -->

      <!-- 头部导航及内页 s-->
      <a-layout>
          <!-- header s-->
          <a-layout-header style="background: #fff; padding: 0">
            <!-- 左侧导航收起展开 -->
            <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"  @click="()=> collapsed = !collapsed"/>
            <!-- item -->
            <div  class='fr  h-100  header-right'>
                <!-- 消息，待办 -->
                <a-dropdown  :trigger="['click']"  v-model="visible">
                    <!-- bell -->
                    <span  class='right-index'>
                      <a-badge :count="2"><a-icon type="bell"  :style="{ padding:'6px',fontSize: '16px'}" /></a-badge>
                    </span> 
                    <!-- bell hover -->
                    <a-menu slot="overlay"  >
                        <!-- tab 消息，待办  -->
                        <a-tabs defaultActiveKey="1"   :tabBarStyle="{marginBottom:'0',textAlign:'center'}">
                          <!-- 通知 -->
                          <a-tab-pane tab="通知(4)" key="1">
                              <!-- 通知list -->
                              <a-list
                                itemLayout="horizontal"
                                :dataSource="testdata"
                              >
                                <a-list-item slot="renderItem" slot-scope="item, index"  class='info_listItem'>
                                  <a-list-item-meta  description="2019/09/19 9:19:30" >
                                    <a slot="title" href="">{{item.title}}</a>
                                    <a-avatar slot="avatar" :src="item.imgsrc" />
                                  </a-list-item-meta>
                                </a-list-item>
                                <div slot="footer">
                                    <a-menu-divider />
                                    <a-menu-item  class='fr  pr20'>
                                      <a href="javascript:;"  >查看更多&gt;&gt;</a>
                                    </a-menu-item>
                                </div>
                              </a-list>
                          </a-tab-pane>
                          <!-- 待办 -->
                          <a-tab-pane tab="待办" key="2" forceRender  align='center'>
                            <a-icon type="exclamation-circle"  :style="{ fontSize:'60px',padding:'6px',marginTop:'60px',color:'#ccc'}"/>
                            <h4>暂无数据</h4>
                          </a-tab-pane>
                        </a-tabs>
                    </a-menu> 
                </a-dropdown>
                <!-- 当前登录用户 -->
                <a-dropdown  >
                    <span  class='right-index'>
                      <a-avatar style="backgroundColor:#87d068" icon="user"  size="small" />  {{username}}
                    </span>
                    <a-menu slot="overlay">
                        <!-- <a-menu-item>
                          <a href="javascript:;">1st menu item</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a href="javascript:;">2nd menu item</a>
                        </a-menu-item>
                        <a-menu-divider /> -->
                        <a-menu-item>
                          <a href="javascript:;"  @click='exitLogin()'><a-icon type="poweroff" :style="{ padding:'6px' }"/>退出登录</a>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
                <!-- global -->
                <a-dropdown  >
                    <span  class='right-index'><a-icon type="global"   :style="{ fontSize: '16px'}" /></span>
                    <a-menu slot="overlay">
                        <a-menu-item  v-for='(item,index) in  language'  :key='index'  @click='changeLocale()'>
                           {{item.name}}
                        </a-menu-item>
                        <!-- <a-menu-item>
                          <a href="javascript:;">HK 繁体中文</a>
                        </a-menu-item>
                        <a-menu-item>
                          <a href="javascript:;">GB English</a>
                        </a-menu-item> -->
                    </a-menu>
                </a-dropdown>
            </div>
          </a-layout-header>
          <!-- header e-->

          <!-- 面包屑 s-->
          <a-row  class='breadmenu'  v-if='$route.path != "/home/tendency"'> 您当前所在位置：
              <a-breadcrumb :routes="routes">  
                <template slot="itemRender" slot-scope="{route, params, routes, paths}"> 
                  <!-- 最后一级 -->
                  <span v-if="routes.indexOf(route) === routes.length - 1">
                      {{route.name}} 
                  </span>
                  <!-- 前置级 -->
                  <span v-else >
                      <!-- 面包屑每一级 ismenu==1时，都有对应路径  ：：面包屑设置时 每一级都需设置成数组[{name:"",isMenu:"",path:""}]：：-->
                      <router-link v-if='route.isMenu==1'  :to='route.path'>{{route.name}}</router-link>
                      <span v-else>{{route.name}}</span> 
                  </span>
                </template>
              </a-breadcrumb>
          </a-row>
          <!-- 面包屑 e-->

          <!-- 内页路由s -->
          <a-layout-content :style="{ margin: '24px 16px ', padding: '24px', background: '#fff', minHeight: '280px' }"  class='overflowy'>
              <router-view></router-view>
          </a-layout-content>
          <!-- 内页路由 e-->
      </a-layout>
      <!-- 头部导航及内页 e-->
  </a-layout>
</template>

<script>
/*vuex*/
import { mapGetters }  from 'vuex'
export default {
  name: 'homeIndex',
  data () {
    return {
      /*static*/
      rootSubmenuKeys: [0,3,4,5,6],//（有子节点的）节点
      collapsed: false,//左侧栏展开-收缩
      visible:false,//消息默认不显示
      //消息data
      testdata:[
          {
            title: '项目va-li已收款',imgsrc:'static/img/icon_gain.png'
          },
          {
            title: '项目va-li已立项',imgsrc:'static/img/icon_project.png'
          },
          {
            title: '项目va-li已发货',imgsrc:'static/img/icon_fahuo12.png'
          },
          {
            title: '项目va-li已付款',imgsrc:'static/img/icon_pay.png'
          },
        ], 
      //语言包
      language:[
          {name:'CN 简体中文'},
          {name:'HK 繁体中文'},
          {name:'GB English'},
      ],
      locale: null,
      /*active*/
      openKeys:[0],//左侧栏展开的（有子节点的）节点
      selectedKeys:['0sub0'],//左侧栏绑定节点，不分父子 
      //面包屑data
      routes: [{
        path: '/home/tendency',
        name: '首页'
      }],
    }
  },
  created(){
      this.watchNav_route()
  },
  methods:{
    // 仅点击含有子菜单的菜单栏才有效 
    onOpenChange (openKeys) {
      // console.log(openKeys)
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)//[0,3]
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) { 
          this.openKeys = openKeys
      } else { 
          this.openKeys = latestOpenKey ? [latestOpenKey] : [0]
      }
    },
    //切换语言包
    changeLocale(e) {
      console.log(e) 
    },
    
    exitLogin(){
        sessionStorage.clear()

        this.$store.commit("setusername",'');
        this.$store.commit("setmenudata",[]);
        this.$store.commit("setentCode",'');
        this.$router.push('/login')
    },
    watchNav_route(){
        /*页面刷新时，导航设置为原位置*/ 
        //1.面包屑
        this.routes =  [{ path: '/home/tendency',name: '首页',isMenu:1 }]
        this.routes = this.routes.concat(this.$route.meta.title) 
        //2.左侧栏
        let path = this.$route.path
        let breadmenu = this.$route.meta.title
        try{ 
          this.menudata.forEach((item,index)=>{ 
              if(path == '/home/tendency'){ 
                  this.selectedKeys.splice(0,1,'0sub0')//左侧栏子节点 
                  this.openKeys.splice(0,1,0)//左侧栏带有子节点展开的父节点
                  throw new Error('end_from_home/tendency') //终止循环
              }
              if(item.to == path){
                  this.selectedKeys.splice(0,1,index)
                  throw new Error('end_from_guanggan')  //终止循环
              }
            //二级子导航与  面包屑第二级进行比较（三级面包屑） 或者 路由（二级面包屑） 
            if(item.children){
                item.children.forEach((it,ind)=>{
                    if(it.to == (breadmenu[1]==undefined? path : breadmenu[1].path)){
                        let num = index+'sub'+ind
                        this.selectedKeys.splice(0,1,num)
                        this.openKeys.splice(0,1,index)
                        throw new Error('end_from_routerChildren') //终止循环
                    }
                })
            }
          })
        }catch(e){
            // console.log(e)
        }
        // console.log(this.openKeys,this.selectedKeys)
    }

  },
  computed:{
    subindex(index,ind) {
        return function(value,val) {
            return value+'sub'+val
        }
    },
    ...mapGetters(['username','menudata'])
    
  },
  watch:{
    //路跳转由时，左侧栏&面包屑
    '$route'(newVal,oldVal){ 
        // console.log(newVal)
        this.watchNav_route()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;line-height: 32px;
  background: rgba(255,255,255,.2);
  margin: 16px;
  color:#fff;
}
.header-right .right-index {display: inline-block; padding:0 12px;height: 100%;cursor: pointer;}
.header-right .right-index:hover {background:rgba(0,0,0,.025)}

/*左侧栏*/
.header-logo{font-size:28px;padding-left:8px;vertical-align:middle}

/*info_list-item*/
.info_listItem{padding:10px 20px; }
.ant-tabs-tabpane{min-height: 284px;}

/*breadmenu setting*/
.breadmenu{background-color: #fff;border-top:1px solid #eee;padding: 10px 20px;}
.ant-breadcrumb{display: inline-block;}
</style>
